<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="售后分类"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['svBuClsId', { rules: [{ required: true, message: '请选择售后分类' }] }]" placeholder="请选择">
            <a-select-option :value="i.id" v-for="i in kindOption" :key="i.id">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="机型"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['phoneType', { rules: [{ required: true, message: '请输入机型' }] }]" placeholder="请输入机型"/>
        </a-form-item>
        <a-form-item
          label="串码"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['phoneCode', { rules: [{ required: true, message: '请输入串码' }] }]" placeholder="请输入串码"/>
        </a-form-item>
        <a-form-item
          label="故障描述"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['errDesc', { rules: [{ required: true, message: '请输入故障描述' }] }]" placeholder="请输入故障描述"/>
        </a-form-item>
        <a-form-item
          label="留机配件"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['stoAcc']" placeholder="请输入留机配件"/>
        </a-form-item>
        <a-form-item
          label="接机人"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['empId', { rules: [{ required: true, message: '请选择接机人' }] }]" placeholder="请选择">
            <a-select-option :value="i.id" v-for="i in userOption" :key="i.id">{{ i.userName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="会员"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['memId', { rules: [{ required: true, message: '请选择接机人' }] }]" placeholder="请选择">
            <a-select-option :value="i.id" v-for="i in memberOption" :key="i.id">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-space>
            <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getSvBusClassListUsingPOST, addAfterSalesRecordUsingPOST } from '@/api/api/shouhouguanli.ts'
import { getMemberListUsingPOST } from '@/api/api/huiyuanguanli.ts'
import { getEmployeesListUsingPOST } from '@/api/api/yuangongguanli.ts'
export default {
  name: 'ServiceCreateServiceCreate',
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      confirmLoading: false,
      loading: false,
      viploading: false,
      addmdl: null,
      current: 1,
      keyword: '',
      info: {},
      kindOption: [],
      userOption: [],
      memberOption: [],
      optionParam: {
        pageNo: 1,
        pageSize: 999,
        queryCondition: '',
        status: 1,
      },
      memberoptionParam: {
        pageNo: 1,
        pageSize: 999,
        queryCondition: '',
        status: '',
      },
    }
  },
  mounted() {
    this.fetchKindOption(this.optionParam)
    this.fetchUserOption(this.optionParam)
    this.fetchMemberOption({ ...this.memberoptionParam, startTime: '1900-01-01', endTime: '2200-12-31' })
  },
  methods: {
    fetchKindOption(params) {
      getSvBusClassListUsingPOST(params)
        .then((res) => {
          this.kindOption = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    fetchMemberOption(params) {
      getMemberListUsingPOST(params)
        .then((res) => {
          this.memberOption = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    fetchUserOption(params) {
      getEmployeesListUsingPOST({...params})
        .then((res) => {
          this.userOption = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    // handler
    handleSubmit(e) {
      console.log(this)

      e.preventDefault()
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
            addAfterSalesRecordUsingPOST({ ...values, storeId: this.$route.params.id })
            .then((res) => {
              this.$message.success('操作成功')    
              this.$router.push({ path: `/service/service/detail/${res.data.id}` })
              this.loading = false
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
          }

      })
    },
  },
}
</script>
